<%--
  Created by IntelliJ IDEA.
  User: 24207
  Date: 2020/6/11
  Time: 21:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!-- 引入jstl表达式 -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
    <head>
        <meta charset="utf-8" />
        <title>用户注册</title>
        <!-- 引入JQuery-->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <!-- Bootstrap 核心 CSS 文件 -->
        <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
        <!-- font-awesome 核心CSS 文件-->
        <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- 引入自定义css文件 -->
        <link href="static/css/main.css" rel="stylesheet" type="text/css">
        <!-- 在bootstrap.min.js 之前引入 -->
        <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
        <!-- 引入datetimepicker -->
        <link href="static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
        <!-- Bootstrap 核心 JavaScript 文件 -->
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

        <!--引入jquery.validate-->
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
        <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
        <!--引入datetimepicker-->
        <script src="static/js/bootstrap-datetimepicker.min.js"></script>
        <style type="text/css">
            body{
                background-image: linear-gradient(to right, #f2dede, #a6e1ec);
            }
        </style>
    </head>
    <body>
        <!--
            基础知识：
            网格系统:通过行和列布局
            行必须放在container内
            手机用col-xs-*
            平板用col-sm-*
            笔记本或普通台式电脑用col-md-*
            大型设备台式电脑用col-lg-*
            为了兼容多个设备，可以用多个col-*-*来控制；
        -->
        <%-- 页面顶部留白 --%>
        <div class="container">
            <div class="row" style="height: 5%"></div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-offset-3 col-md-6">
                    <form class="form-horizontal" id="register_form" action="register" method="post">
                        <span class="heading">用户注册</span>
                        <!-- 用户名文本框 -->
                        <div class="form-group">
                            <input type="username" class="form-control" id="username" name="username"  placeholder="请输入用户名">
                            <i class="fa fa-user"></i>
                        </div>
                        <!-- 密码文本框 -->
                        <div class="form-group help">
                            <input type="password" class="form-control" id="password" name="password"  placeholder="请输入密码">
                            <i class="fa fa-lock"></i>
<%--                            <a href="#" class="fa fa-question-circle"></a>--%>
                        </div>
                        <%-- 邮箱文本框 --%>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                            <i class="fa fa-envelope"></i>
                        </div>
                        <%-- 性别选择 --%>
                        <div class="form-group">
                            <label class="left-label">性别：</label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sexMale" value="male"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="sex" id="sexFemale"  value="female" checked="checked"> 女
                            </label>
                        </div>
                        <%-- 出生日期 --%>
                        <div class="form-group">
                            <label class="left-label">出生日期：</label>
                            <div class="input-append date form_datetime" id="form_datetime">
                                <input type="text" value="" name="birthday" id="birthday" readonly>
                                <span class="add-on"><i class="icon-remove"></i></span>
                                <span class="add-on"><i class="icon-calendar"></i></span>
                            </div>
                        </div>
                        <%-- 错误信息 --%>
                        <label id="errormessage" for="register_form">该用户名已被使用</label>
                        <div class="form-group">
                            <a href="turnToLogin" class="btn btn-default" id="login_btn">直接登录</a>
                            <div>
<%--                                <button type="submit" class="btn btn-default">注册</button>--%>
                                <input type="button" class="btn btn-default" value="注册" onclick="clickRegister()"/>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
    <script  type="text/javascript">
        $().ready(function(){
            $("#errormessage").hide();
            $("#register_form").validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 5
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    sex:{
                        required:true
                    },
                    birthday:{
                        required:true,
                    },
                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        minlength: "用户名至少由五位字符组成"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码至少由五位字符组成"
                    },
                    email:{
                        required:"请输入邮箱",
                        email:"邮箱格式错误"
                    }
                }
            });

            $('#form_datetime').datetimepicker({
                format:"yyyy-mm-dd",
                autoclose: true,
                minView: 2
            });
        });

        function clickRegister() {
            //alert($('input[name=sex]:checked').val());
            var validator = $("#register_form").validate();
            if (validator.form()) {
                $.post("register",
                    {
                        'username':$("#username").val(),'password':$("#password").val(),
                        'email':$("#email").val(),'sex':$('input[name=sex]:checked').val(),
                        'birthday':$("#birthday").val()
                    },

                    function (data) {
                        if (data == "true") {
                            window.location.href = "turnToLogin";
                        } else {
                            console.log("The username has been used");
                            $("#errormessage").show();
                            setTimeout(function () {
                                $("#errormessage").hide();
                            }, 2000);
                        }
                    })
            }
        }
    </script>
</html>
